<template>
  <div class="app">
    <!-- 顶部广告 -->
    <div v-if="showAd" class="top-ad">
      <img src="~/assets/images/img/B-01首页_slices/顶部广告_通知.png" alt="顶部广告" class="ad-img">
      <div class="ad-close" @click="closeAd">×</div>
    </div>
    
    <!-- 顶部导航栏 -->
    <Header @openRegister="showRegisterModal = true" />
    
    <!-- 过滤器栏 -->
    <FilterBar 
      :selected-tab="selectedTab"
      :colors="colors"
      @update:selectedTab="selectedTab = $event"
    />
    
    <!-- 图片网格 -->
    <main class="main-content">
      <div class="container">
        <ImageGrid :images="images" />
        <div class="load-more">没有更多了</div>
      </div>
    </main>
    
    <!-- 页脚 -->
    <Footer />
    
    <!-- 注册弹窗 -->
    <RegisterModal 
      :visible="showRegisterModal" 
      @close="showRegisterModal = false"
      @switchToLogin="handleSwitchToLogin"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Header from './components/Header.vue'
import FilterBar from './components/FilterBar.vue'
import ImageGrid from './components/ImageGrid.vue'
import Footer from './components/Footer.vue'
import RegisterModal from './components/RegisterModal.vue'

const showAd = ref(true)
const selectedTab = ref('all')
const showRegisterModal = ref(false)

const closeAd = () => {
  showAd.value = false
}

const handleSwitchToLogin = () => {
  showRegisterModal.value = false
  // 这里可以添加切换到登录弹窗的逻辑
  console.log('切换到登录')
}
const colors = ref([
  '#000000', '#333333', '#555555', '#FF5733', 
  '#FF8C33', '#FFD133', '#90EE90', '#00D4AA', 
  '#3498DB', '#5B69C3', '#9B59B6', '#E91E63'
])

const images = ref([
  { src: '~/assets/images/img/B-01首页_slices/图片位.png', title: '图片1', author: '烟雨下扬州', views: '3260浏览', height: 250 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(1).png', title: '图片2', author: '烟雨下扬州', views: '2180浏览', height: 480 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(2).png', title: '图片3', author: '烟雨下扬州', views: '4590浏览', height: 320 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(3).png', title: '图片4', author: '烟雨下扬州', views: '5680浏览', height: 420 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(4).png', title: '图片5', author: '300分享分', views: '1890浏览', height: 280 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(5).png', title: '图片6', author: '烟雨下扬州', views: '3420浏览', height: 380 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(6).png', title: '图片7', author: '烟雨下扬州', views: '2650浏览', height: 450 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(7).png', title: '图片8', author: '烟雨下扬州', views: '4120浏览', height: 300 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(8).png', title: '图片9', author: '300分享分', views: '2890浏览', height: 350 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(9).png', title: '图片10', author: '烟雨下扬州', views: '3560浏览', height: 260 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(10).png', title: '图片11', author: '烟雨下扬州', views: '1980浏览', height: 400 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(11).png', title: '图片12', author: '烟雨下扬州', views: '4730浏览', height: 330 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(12).png', title: '图片13', author: '烟雨下扬州', views: '5120浏览', height: 290 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(13).png', title: '图片14', author: '烟雨下扬州', views: '2340浏览', height: 470 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(14).png', title: '图片15', author: '烟雨下扬州', views: '3890浏览', height: 310 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(15).png', title: '图片16', author: '烟雨下扬州', views: '4560浏览', height: 360 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(16).png', title: '图片17', author: '烟雨下扬州', views: '6780浏览', height: 270 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(17).png', title: '图片18', author: '烟雨下扬州', views: '8920浏览', height: 440 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(18).png', title: '图片19', author: '烟雨下扬州', views: '5670浏览', height: 320 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(19).png', title: '图片20', author: '烟雨下扬州', views: '3450浏览', height: 390 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(20).png', title: '图片21', author: '300分享分', views: '7890浏览', height: 250 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(21).png', title: '图片22', author: '300分享分', views: '9120浏览', height: 430 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(22).png', title: '图片23', author: '烟雨下扬州', views: '6540浏览', height: 300 },
  { src: '~/assets/images/img/B-01首页_slices/图片位(23).png', title: '图片24', author: '烟雨下扬州', views: '6540浏览', height: 300 },
])
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", 
               "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.main-content {
  padding: 0 50px;
  min-height: 60vh;
}

.load-more {
  text-align: center;
  padding: 40px 0;
  color: #999;
  font-size: 14px;
}

.top-ad {
  width: 100%;
  background: white;
  position: relative;
}

.ad-img {
  width: 100%;
  height: auto;
  display: block;
}

.ad-close {
  position: absolute;
  top: 3px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 0.3s;
  z-index: 10;
}

.ad-close:hover {
  background: rgba(0, 0, 0, 0.7);
}
</style>

